<template>
  <div>
    <ul style="padding-left: 80px;">
      <li v-for="message in messages" :key="message.id">
        <!--:to中的路径，ES6中使用``，ES5中使用''，使用${}传递参数-->
        <!--参数传递方式一：param方式的参数占位符；-->
        <!--<router-link :to="`/home/message/messageDetail/${message.id}`">{{message.name}}</router-link>-->
        <!--参数传递方式二：query方式传递参数，？占位符-->
        <router-link :to="`/home/message/messageDetail?id=${message.id}`">{{message.name}}</router-link>
      </li>
    </ul>
    <hr>
    <router-view></router-view>
  </div>

</template>

<script>
  export default {
    name: "message",
    data() {
      return {
        messages: []
      }
    },
    //在页面渲染之后加载这里的内容
    mounted() {
      //模拟后台请求
      setTimeout(() => {
        const myMessages = [
          {"id": 1, "name": "message01"},
          {"id": 2, "name": "message02"},
          {"id": 3, "name": "message03"},
          {"id": 4, "name": "message04"},
          {"id": 5, "name": "message05"},
        ];
        this.messages = myMessages;
      }, 1000)
    }
  }
</script>

<style scoped>

</style>
